import Vue from "vue";

import App from "./App.vue";

import VueRouter from "vue-router";
Vue.use(VueRouter);

import UsersA from "./components/UsersA.vue";
import UsersA1 from "./components/UsersA1.vue";
import UsersA2 from "./components/UsersA2.vue";
import UsersA21 from "./components/UsersA21.vue";
import UsersB from "./components/UsersB.vue";
import UsersC from "./components/UsersC.vue";
import NotFound from "./components/NotFound.vue";

const router = new VueRouter({
  // http://127.0.0.1:8088/#/users
  mode: "hash",
  // http://127.0.0.1:8088/users
  // mode: "history",
  routes: [
    {
      path: "/users",
      name: "users",
      // component: UsersA, //App
      components: {
        default: UsersA1,
        a: UsersB,
      },
      children: [
        {
          path: "b/:id",
          name: "usersb",
          // redirect: { name: "usersc" },
          // redirect: "/users",
          components: {
            default: NotFound,
            a: UsersC,
            b: NotFound,
          },
          props: { default: true, a: true, b: true },
        },
      ],
    },
    {
      path: "/c/:id",
      alias: "/a/:id",
      name: "usersc",
      component: UsersC,
      props: true,
    },
  ],
});

new Vue({
  render: (h) => h(App),
  router,
}).$mount("#app");
